<!--数据查询列表组件  -->
<template>
  <div :span="20" style="padding: 0px 15px;" class="MessagePanel">
    <div class="topButton">
      <div class="name">
        <p class="classNme">设备档案</p>
        <p class="smallClassName">DEVICE PROFILE</P>
      </div>
    </div>
    <!-- 两个el-tabs用来切换历史数据和实时数据下的各个数据项  -->
    <div class="data-record-view-container">
      <el-tabs type="border-card">
      </el-tabs>
      <div style="display: flex; ">
        <el-tabs tab-position="left" @tab-click="checkTabs" v-model="deviceType" class="dataTables">
          <el-tab-pane label="水表" name="1"/>
          <el-tab-pane label="电表" name="2"/>
          <el-tab-pane label="冷却塔" name="3"/>
          <el-tab-pane label="热量表" name="4"/>
          <el-tab-pane label="流量计" name="5"/>
          <el-tab-pane label="冷热表" name="6"/>
          <el-tab-pane label="阀门" name="7"/>
          <el-tab-pane label="水泵" name="8"/>
          <el-tab-pane label="温控仪" name="9"/>
          <el-tab-pane label="VAV温控仪" name="10"/>
          <el-tab-pane label="时间采样仪" name="11"/>
          <el-tab-pane label="制冷主机" name="12"/>
        </el-tabs>
        <div style="width: 100%;padding: 0px 20px;">
          <div class="buttom" style="text-align: end;">
            <el-button class="Btn" size="small" type="topSubButtom" @click="showCostPlan()">
              <svg-icon icon-class="add" class="buttonSvg"/>
              付费方案
            </el-button>
            <el-button class="Btn" size="small" type="topSubButtom" @click="addDevice()">
              <svg-icon icon-class="add" class="buttonSvg"/>
              设备录入
            </el-button>
            <el-button class="Btn" size="small" type="topSubButtom" @click="delDevice()">
              <svg-icon icon-class="remove" class="buttonSvg"/>
              删除
            </el-button>
          </div>
          <el-table
              :data="tableData.slice((data.pageNum - 1) * data.pageSize, data.pageNum * data.pageSize)"
              class="communityTable"
              empty-text="暂无数据"
              :default-sort="{ prop: 'date', order: 'descending' }"
              row-key="deviceId"
              style="width: 100%;height: 470px;"
              @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column prop="rangeName" label="所属区域" align="center"/>
            <el-table-column prop="deviceNo" label="设备编号" align="center"/>
            <el-table-column prop="deviceName" label="设备名称" align="center"/>
            <el-table-column prop="deviceType" label="设备类型" align="center">
              <template #default="scope">
                {{ deviceTypeObj[scope.row.deviceType.toString()] }}
              </template>
            </el-table-column>
            <el-table-column prop="enable" label="启用状态" align="center">
              <template #default="scope">
                <el-switch
                    v-model="scope.row.enable"
                    style="--el-switch-on-color: #13ce66;"
                    active-value=1
                    inactive-value=2
                    @change="enableChange(scope.row)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="wayType" label="通讯通道" align="center">
              <template #default="scope">
                {{ scope.row.wayType ? wayTypeObj[scope.row.wayType.toString()] : "无" }}
              </template>
            </el-table-column>
            <el-table-column prop="road" label="所属电路" align="center"/>
            <el-table-column label="操作" align="center" min-width="120">
              <template #default="scope">
                <el-button class="Btn" size="small" type="upd" @click="addChildDevice(scope.row)"
                           v-if="scope.row.parentId === 0">
                  <svg-icon icon-class="add" class="buttonSvg"/>
                </el-button>
                <el-button class="btn-donate" size="small" type="allot" @click="allotCostPlan(scope.row)">
                  <svg-icon icon-class="plan" class="buttonSvg"/>
                </el-button>
                <el-button class="Btn" size="small" type="upd" @click="updateDevice(scope.row)">
                  <svg-icon icon-class="edit" class="buttonSvg"/>
                </el-button>
                <el-button class="btn-donate" size="small" type="del" @click="delDevice(scope.row)">
                  <svg-icon icon-class="del" class="buttonSvg"/>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
                small
                background
                layout="prev, pager, next"
                :current-page="data.currentPage"
                :page-size="data.pageSize"
                :total="tableData.length"
                @current-change="currentChange"
                style="float: left;"/>
            <div class="pageData">
              <span class="tableDataLengh">共 {{ tableData.length }} 条</span>
              <span>每页 {{ data.pageSize }} 条</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <add-device-dialog ref="add_device_dialog"/>
    <CostPlanManagement ref="CostPlanManagement"/>
    <billing-scheme-tree ref="billing_scheme_tree"/>
  </div>
</template>

<script>

let component;
/* 引入所有的数据项组件  */
import {nextTick} from 'vue';
import AddDeviceDialog from "@/views/system/components/AddDeviceDialog";
import CostPlanManagement from "@/views/system/components/CostPlanManagement";
import BillingSchemeTree from "@/views/system/components/BillingSchemeTree.vue";
//TODO 当前只添加了历史数据项组件 还需添加实时数据项组件

export default {
  name: 'DeviceTableView',
  data() {
    return {
      deviceType: "1",
      dynamicComponent: null,//需要动态加载的数据项名字段
      selected: [],
      data: {
        pageNum: 1,
        pageSize: 7,
        currentPage: 1
      },
      tableData: [],
      deviceTypeObj: {
        "1": "水表",
        "2": "电表",
        "3": "冷却塔",
        "4": "热量表",
        "5": "流量计",
        "6": "冷热表",
        "7": "阀门",
        "8": "水泵",
        "9": "温控仪",
        "10": "VAV温控仪",
        "11": "时间采样仪",
        "12": "制冷主机"
      },
    }
  },
  components: {BillingSchemeTree, CostPlanManagement, AddDeviceDialog},

  methods: {
    allotCostPlan(row) {
      let ids = [row.deviceId]
      component.$refs.billing_scheme_tree.showDialog(ids, row.costPlanId, component.deviceType);
    },
    handleSelectionChange(val) {
      component.selected = val;
    },
    async checkTabs(tab, event) {//两个tabs的触发事件
      await nextTick();//等待DOM刷新完成 否则的话dataViewName 无法及时更新bigLabel和smallLabel
      this.queryData();
    },
    setSelRanges(queryIds, rangeId) {
      component.rangeIds = queryIds;
      component.rangeId = rangeId;
      this.queryData();
    },
    async queryData() {
      let queryObj = {
        actionType: "deviceQuery",
        ids: component.rangeIds,
        deviceType: component.deviceType
      }
      let response = await component.$asyncPost("device", queryObj);
      if (response.success) {
        component.tableData = response.deviceList;
      }
    },
    showCostPlan() {
      this.$refs.CostPlanManagement.showDialog({deviceList: component.selected, deviceType: component.deviceType});
    },
    addDevice() {
      if (!component.rangeId) {
        component.$message.warning('当前所选的区域无法添加设备。');
        return;
      }
      this.$refs.add_device_dialog.showDialog('', component.rangeId, component.deviceType);
    },
    addChildDevice(row) {
      if (!component.rangeId) {
        component.$message.warning('当前所选的区域无法添加设备。');
        return;
      }
      this.$refs.add_device_dialog.showDialog({
        parentId: row.deviceId,
        deviceType: row.deviceType
      }, component.rangeId, component.deviceType);
    },
    updateDevice(row) {
      this.$refs.add_device_dialog.showDialog(row);
    },
    delDevice(row) {
      if (!row) {
        if (component.selected.length <= 0) {
          component.$message.warning('请先选择需要删除的设备')
          return;
        }
      }
      this.$confirm("是否删除该所选设备?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "confirm"
      }).then(async () => {
        try {
          let response = await component.$asyncPost("device", {
            actionType: "deviceDelete",
            deviceIds: row ? [row.deviceId] : component.selected.map(item => item.deviceId)
          });
          if (response.success) {
            this.$message.success("删除成功");
            await component.queryData();
          } else {
            this.$message.error(response.message);
          }
        } catch (error) {
          this.$message.error("删除时发生错误");
        }
      }).catch(() => {
        this.$message.info("取消");
      })
    },
    async enableChange(row) {
      try {
        let response = await component.$asyncPost("device", {
          actionType: "deviceEnable",
          enable: row.enable,
          deviceId: row.deviceId
        });
        if (response.success) {
          if (row.enable === "1") {
            this.$message.success("启动成功");
          } else {
            this.$message.success("关闭成功");
          }
        } else {
          this.$message.error(response.message);
        }
      } catch (error) {
        this.$message.error("删除时发生错误");
      }
    },
    currentChange(val) {
      this.data.pageNum = val;
      this.data.currentPage = val;
    },
  },
  mounted() {
    component = this;
  }
}

</script>
<style lang='scss'>
.data-record-view-container {
  padding-top: 20px;
}
</style>